<template lang="">
    <div class="home_container">
        <!-- 弹窗提示角色选择 -->
        <div class="tooltip_container">
            <!-- 角色选择标题 -->
            <div class="title_container">
                <h2>Please select your identity</h2>
                <p>Here you will choose three different roles.</br>Different roles correspond to different functions</p>
            </div>
            <!-- 角色选择容器 -->
            <div class="user_container">
                <!-- 角色一 -->
                <div :class="[role === 'User'? 'role-css1' : '', 'user1_box']" @click="changeRole('User')">
                    <div class="iconfont icon-yonghu"></div>
                    <div>
                        <span>User</span>
                    </div>
                </div>
                <!-- 角色二 -->
                <div :class="[role === 'Servicer'? 'role-css2' : '', 'user2_box']" @click="changeRole('Servicer')">
                    <div class="iconfont icon-kefu"></div>
                    <div>
                        <span>Servicer</span>
                    </div>
                </div>
                <!-- 角色三 -->
                <div :class="[role === 'Courier'? 'role-css3' : '',  'user3_box']" @click="changeRole('Courier')">
                    <div class="iconfont icon-kuaidi"></div>
                    <div>
                        <span>Courier</span>
                    </div>
                </div>
            </div>
            <!-- 确定按钮 -->
            <el-button type="primary" plain @click="clientHide()">Determine</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 弹窗显示与否
            hideBollean: false,
            // 用户角色选择
            role: '',
        }
    },
    methods: {
        // 点击按钮，添加角色
        changeRole(role) {
            this.role = role
        },
        // 点击按钮提交所选角色
        clientHide() {
            if(this.role === '') {
                this.$message.warning('请选择角色')
                return
            } else if(this.role === 'User') {
                this.$router.push('/user/home')
            }
        }
    },
}
</script>
<style lang="less" scoped>
    .home_container {
        overflow: hidden;
        background-color: rgb(38, 42, 43);
        background-size: cover;
        height: 100%;
        color: #ffff;
        .tooltip_container {
            width: 650px;
            height: 530px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #111;
            .title_container {
                text-align: center;
                padding-top: 25px;
            }
            .user_container {
                display: flex;
                justify-content: space-around;
                align-items: center;
                .user1_box, .user2_box, .user3_box {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    padding: 40px;
                    margin: 30px auto;
                    cursor: pointer;
                    .iconfont {
                        font-size: 50px;
                    }
                }
                .user1_box:hover, .role-css1 {
                    color: #6fffe9;
                    background-color: #3a506b;
                }
                .user2_box:hover, .role-css2 {
                    color: #4EBA6F;
                    background-color: #003459;
                }
                .user3_box:hover, .role-css3 {
                    color: #F0C419;
                    background-color: #e76f51;
                }
            }
            .el-button {
                width: 70%;
                position: absolute;
                margin-top: 10px;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        .tooltip_container_hide {
            display: none;
        }
    }
</style>